import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { Dispatch, bindActionCreators } from 'redux'
import { RootState } from 'src/redux'
//ui
import { Input, Button, Select, Divider } from 'antd';
//comp
import { WordTagSelectState } from "./reducer";
//redux ds
import * as Action from './reducer'

const { Option } = Select;

export interface WordTagSelectProps {
    state: WordTagSelectState
    useInnerValue?: boolean
    setCurrentTagValue: typeof Action.setCurrentTagValue
    setCurrentTagValueInner: typeof Action.setCurrentTagValueInner
    add: typeof Action.add
}

export const _WordTagSelect: React.SFC<WordTagSelectProps> = props => {
    const {
        state, useInnerValue: outerValue,
        setCurrentTagValue, add, setCurrentTagValueInner
    } = props
    const [tagAdd, setTagAdd] = useState<string>("");
    const [thisTagValue, setThisTagValue] = useState<string>("");


    useEffect(() => {
        if (outerValue) {
            if (state.currentTagValueInner)
                setThisTagValue(state.currentTagValueInner)
        }
        else {
            setThisTagValue(state.currentTagValue)
        }
    }, [thisTagValue, outerValue, state.currentTagValue, state.currentTagValueInner])

    return (
        <Select
            showSearch
            style={{ width: "100%" }}
            placeholder='选择标签'
            optionFilterProp="children"
            value={thisTagValue}
            onSelect={(wordTagValue) => {
                if (outerValue) {
                    setCurrentTagValueInner(wordTagValue)
                }
                else {
                    setCurrentTagValue(wordTagValue)
                }
            }}
            dropdownRender={menu => (
                <div>
                    {menu}
                    <Divider style={{ margin: '4px 0' }} />
                    <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
                        <Input style={{ flex: 'auto' }} value={tagAdd} onChange={(e) => {
                            setTagAdd(e.target.value)
                        }} />
                        <Button
                            style={{ flex: 'none', cursor: 'pointer' }}
                            onClick={() => { add(tagAdd) }}
                        >Add item</Button>
                    </div>
                </div>
            )}
        >
            {state.dto.dtos.map(d => (
                <Option key={d.wordTagValue} value={d.wordTagValue}>{d.wordTagValue}</Option>
            ))}
        </Select>
    )
}

const mapStateToProps = (state: RootState) => ({
    state: state.WordTagSelectState

})

const mapDispatchToProps = (dispatch: Dispatch) =>
    bindActionCreators({
        setCurrentTagValue: Action.setCurrentTagValue,
        add: Action.add,
        setCurrentTagValueInner: Action.setCurrentTagValueInner,
    }, dispatch)

/**
 * 得到当前过滤器并渲染 Link。
 */
const WordTagSelect = connect(
    mapStateToProps,
    mapDispatchToProps
)(_WordTagSelect)

export default WordTagSelect